/**
* @作者:邹蕴果.陈博宇
* @创建时间：2021/7/5
* @修改时间：2021/7/21
*/


<template>
	<view class="main">
		<!-- 头部导航 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo">
			<view class="navitems">
				<view class="navitem" @click="jumptoLogIn" v-if="!isLogin">登录</view>
				<el-badge :value="messageNum" class="navitem" v-if="isLogin" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut" v-if="isLogin">退出登录</view>
			</view>
		</view>

		<view class="body">
			<!-- 搜索区域 -->
			<div class="search">
				<el-input class="searchInput" type="text" placeholder="请输入想要租赁的商品" v-model="searchtext">
				</el-input>
				<div class="searchEmtpy"></div>
				<el-button class="search-btn" icon="el-icon-search" @click="jumpToSearch" type="primary">搜索</el-button>
			</div>
			<view class="center">

				<el-col class="side">
					<!-- 侧边导航栏 -->
					<el-menu :uniqueOpened="true" default-active="1" class="el-menu-vertical-demo" @open="handleOpen"
						@close="handleClose" active-text-color="#409EFF">

						<el-menu-item index="1" class="recommendMenu">
							<template #title>推荐</template>
						</el-menu-item>

						<el-menu-item index="2" class="digitalMenu">
							<template #title>数码</template>
							<view class="digitalSubMenu">
								<el-menu-item index="2-1" @click="jumptophone">手机</el-menu-item>
								<el-menu-item index="2-2" @click="jumptoDesktop">电脑</el-menu-item>
							</view>
						</el-menu-item>

						<el-menu-item index="3" class="bookMenu">
							<template #title>书籍</template>
							<view class="bookSubMenu">
								<el-menu-item index="3-1" @click="jumptoDesktop">传记</el-menu-item>
								<el-menu-item index="3-2" @click="jumptoDesktop">小说</el-menu-item>
							</view>
						</el-menu-item>

						<el-menu-item index="4" class="furnitrueMenu">
							<template #title>家具</template>
							<view class="furnitrueSubMenu">
								<el-menu-item index="4-1" @click="jumptoSofa">沙发</el-menu-item>
								<el-menu-item index="4-2" @click="jumptoDesk">桌子</el-menu-item>
							</view>
						</el-menu-item>
					</el-menu>
				</el-col>

				<!-- 轮播推荐图 -->
				<swiper class="swiper" :autoplay=true indicator-dots="true">
					<swiper-item>
						<image class="swiperimg" src="/static/image/ad2.jpg" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image class="swiperimg" src="/static/image/ad3.jpg" mode="aspectFill"></image>
					</swiper-item>

				</swiper>

				<view class="unCard" v-if="!isLogin">
					<div class="unCard-header" style="margin-top: 25%;">
						<el-image src="/static/image/toLogin.png" fit="contain"></el-image>
					</div>
					<view style="margin-top: 5%; color: #409EFF;">
						还未登录哦
					</view>
					<view style="margin-top: 3%; color: #409EFF;">
						登录后再来逛享租吧!
					</view>
					<view style="margin-top: 10%;">
						<el-button type="primary" style="width: 60%;" @click="jumptoLogIn">去登录</el-button>
					</view>
				</view>
				<!-- 个人卡片 -->

				<div class="card" v-if="isLogin">
					<div class="card-header">
						<el-avatar :size="80" :src="iconimg" style="margin-top: 10%;"></el-avatar>
					</div>
					<div class="card-body">
						<p class="Username">{{username}}</p>
					</div>
					<div class="social-links">
						<div class="cardEmpty"></div>
						<el-badge :value="shoppingCartNum" class="item" type="primary" :hidden="shoppingCartNum==0">
							<div class="profileText" @click="jumptoProfile">购物车</div>
						</el-badge>
						<div class="cardEmpty"></div>
						<el-badge :value="daifahuoNum" class="item" type="primary" :hidden="daifahuoNum==0">
							<div class="profileText" @click="jumptoProfile">待发货</div>
						</el-badge>
						<div class="cardEmpty"></div>
					</div>
					<div class="social-links">
						<div class="cardEmpty"></div>
						<el-badge :value="daishouhuoNum" class="item" type="primary" :hidden="daishouhuoNum==0">
							<div class="profileText" @click="jumptoProfile">待收货</div>
						</el-badge>
						<div class="cardEmpty"></div>
						<el-badge :value="zulinzhong" class="item" type="primary" :hidden="zulinzhong==0">
							<div class="profileText" @click="jumptoProfile">租赁中</div>
						</el-badge>
						<div class="cardEmpty"></div>
					</div>
					<div class="social-links">
						<div class="cardEmpty"></div>
						<el-badge :value="daiguihuan" class="item" type="primary" :hidden="daiguihuan==0">
							<div class="profileText" @click="jumptoProfile">待归还</div>
						</el-badge>
						<div class="cardEmpty"></div>
						<el-badge :value="guihuanzhong" class="item" type="primary" :hidden="guihuanzhong==0">
							<div class="profileText" @click="jumptoProfile">归还中</div>
						</el-badge>
						<div class="cardEmpty"></div>
					</div>
				</div>
			</view>
			<!-- 推荐列表 -->

			<view class="recommend">
				<view class="hotSale">
					<view style="font-size: 24px;font-weight: lighter;">经典热卖</view>
					<view class="recCardView">
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(allGoods[0].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+allGoods[0].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{allGoods[0].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{allGoods[0].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(allGoods[1].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+allGoods[1].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{allGoods[1].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{allGoods[1].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(allGoods[2].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+allGoods[2].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{allGoods[2].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{allGoods[2].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(allGoods[3].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+allGoods[3].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{allGoods[3].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{allGoods[3].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(allGoods[4].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+allGoods[4].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{allGoods[4].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{allGoods[4].price}} 起</view>
							</div>
						</el-card>
					</view>
				</view>


				<view class="recommendGoods" v-if="isLogin">
					<view style="font-size: 24px;font-weight: lighter;">为你推荐</view>
					<view class="recCardView">
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(recommendGoods[0].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+recommendGoods[0].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{recommendGoods[0].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{recommendGoods[0].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(recommendGoods[1].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+recommendGoods[1].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{recommendGoods[1].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{recommendGoods[1].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(recommendGoods[2].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+recommendGoods[2].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{recommendGoods[2].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{recommendGoods[2].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(recommendGoods[3].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+recommendGoods[3].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{recommendGoods[3].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{recommendGoods[3].price}} 起</view>
							</div>
						</el-card>
						<view class="recCardEmpty"></view>
						<el-card shadow="hover" class="recCard" @click.native="jumpToDetail(recommendGoods[4].id)">
							<div class="recCard-image">
								<el-image style="width: 100%;height: 100%;"
									:src='"http://47.96.168.135:7388"+recommendGoods[4].src' fit="contain"></el-image>
							</div>
							<div style="padding: 14px;">
								<span>{{recommendGoods[4].name}}</span>
								<view style="color: #FF0000; margin-top: 15rpx;">¥{{recommendGoods[4].price}} 起</view>
							</div>
						</el-card>
					</view>
				</view>


			</view>
		</view>
		<!-- 聊天界面 -->
		<el-drawer :visible.sync="drawer" :direction="direction" ref="drawer">
			<scroll-view class="main">
				<view v-for="item in friendlist" class="perRow" @click="jumptoChat(item.uuid,item.storeName)">
					<image :src='"http:////47.96.168.135:7388"+item.faceUrl' class="img"></image>
					<view class="text">{{item.storeName}}</view>
				</view>
			</scroll-view>
			<el-drawer :append-to-body="true" :visible.sync="innerDrawer" :before-close="handleClose" ref="drawer2">
				<view class="outer">
					<view class="uni-column">
						<view class="Drawerheader">{{name}}</view>
						<view class="content" id="content" :style="{height:style.contentViewHeight+'px'}">
							<scroll-view id="scrollview" scroll-y="true" :style="{height:style.contentViewHeight+'px'}"
								:scroll-with-animation="true" :scroll-top="scrollTop">
								<message-show v-for="(message,index) in pastrecord" :key="index"
									v-bind:message="message" :id="index"></message-show>
								<view id="bottom"></view>
							</scroll-view>
						</view>
						<view class="foot">
							<chat-input @send-message="getInputMessage"></chat-input>
						</view>
					</view>
				</view>
			</el-drawer>
		</el-drawer>
	</view>


</template>

<script>
	import chatInput from '../../components/chatinput.vue';
	import messageShow from '../../components/messageshow.vue';
	export default {
		data() {
			return {
				name: '',
				uuid: '',
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0,
				},
				scrollTop: 0,
				friendlist: [],
				pastrecord: [],
				innerDrawer: false,
				drawer: false,
				baseurl: 'http://47.96.168.135:7388',
				iconimg: '../static/image/head.jpg',
				username: '游客',
				searchtext: '',
				title: 'Hello',
				digishow: true,
				isLogin: this.$cookies.isKey("userId"),

				messageNum: '0',

				shoppingCartNum: '0',
				daifahuoNum: '0',
				daishouhuoNum: '0',
				zulinzhong: '0',
				daiguihuan: '0',
				guihuanzhong: '0',

				sku: [],
				sku2: [],
				allGoods: [],
				recommendGoods: [],
			}
		},
		components: {
			chatInput,
			messageShow
		},

		activated() {
			location.reload()
		},

		mounted: function() {
			//获取首页商品
			this.getAllGoods();
			if (this.$cookies.isKey("userId")) {
				this.getRecommendGoods()
			}
			this.getNumOfOrder()
			this.getlist()
		},

		onLoad() {

			if (this.$cookies.get("userName") != null && this.$cookies.get("userFaceImg") != null) {

				this.username = this.$cookies.get("userName")
				this.iconimg = this.baseurl + this.$cookies.get("userFaceImg")
				//初始化websocket
				this.$websocket.dispatch('WEBSOCKET_INIT', "ws://47.96.168.135:5657/socket/" + this.$cookies.get(
					"useruuid"));
				uni.onSocketMessage(function(res) {});
			}
			var that = this;
			//监听websocket
			uni.onSocketMessage(function(res) {
					var content = res.data.split("|")[0]
					var sender = res.data.split("|")[1]
					if (that.$cookies.get(sender) != null) {
						that.pastrecord = JSON.parse(that.$cookies.get(sender));
						that.$cookies.remove(sender)
					}
					that.pastrecord.push({
						user: "home",
						content: content,
						hasSub: false,
						subcontent: '',
					})
					that.$cookies.set(sender, JSON.stringify(that.pastrecord), "1h")
					that.$message({
						type: 'info',
						message: '有新消息！'
					});
					that.scrollToBottom();
				}),


				uni.hideNavigationBarLoading()
		},
		created: function() {

			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素
		},

		methods: {
			//退出登录
			openLogOutWindow() {
				this.$confirm('确定要退出登录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$cookies.remove("userName")
					this.$cookies.remove("userId")
					this.$cookies.remove("userFaceImg")
					location.reload()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出登录'
					});
				});
			},
			logOut() {
				this.openLogOutWindow()
			},
			//界面跳转
			jumpToSearch() {
				uni.navigateTo({
					url: 'search?searchText=' + this.searchtext
				})
			},
			//界面跳转

			jumptoProfile() {
				if (this.$cookies.get("userName") != null) {
					uni.navigateTo({
						url: '../ShoppingCart/ShoppingCart'
					})
				}
			},
			//界面跳转
			jumptophone() {
				uni.navigateTo({
					url: 'UserDetail?id1=数码&id2=手机'
				});
			},
			//界面跳转
			jumptoDesktop() {
				uni.navigateTo({
					url: 'UserDetail?id1=Digital&id2=Computer'
				});
			},
			//界面跳转
			jumptoBiography() {
				uni.navigateTo({
					url: 'UserDetail?id1=Book&id2=Biography'
				});
			},
			//界面跳转
			handleClose(done) {

				this.pastrecord = [];
				done();
			},
			//获取消息界面输入框的输入数据
			getInputMessage: function(message) {

				this.addMessage('customer', message.content, false);
				this.postmessage(message.content);
			},
			//消息记录存入本地
			addMessage: function(user, content, hasSub, subcontent) {
				var that = this;
				if (this.$cookies.get(this.uuid) != null) {
					this.pastrecord = JSON.parse(this.$cookies.get(this.uuid))
					this.$cookies.remove(this.uuid)
				}
				this.pastrecord.push({
					user: user,
					content: content,
					hasSub: false,
					subcontent: subcontent
				})

				this.$cookies.set(this.uuid, JSON.stringify(this.pastrecord), "1h")

			},

			//移至消息界面底部
			scrollToBottom: function() {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();

				query.exec(function(res) {
					that.style.mitemHeight = 0;
					res[0].forEach(function(rect) {
						// console.info(rect.height);
						that.style.mitemHeight = that.style.mitemHeight + rect.height + 20;
					});

					if (that.style.mitemHeight > that.style.contentViewHeight) {
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight;
					}
				});
			},
			//将输入消息发送到websocket服务器
			postmessage: function(info) {
				this.$websocket.dispatch("WEBSOCKET_SEND", info + "|" + this.$cookies.get("useruuid") + "|" + this
					.uuid);


				// this.addMessage('home', info, false);




			},
			//进入消息界面函数
			jumpToMessage() {
				if (this.$cookies.get("userName") != null) {

					this.drawer = true;
				} else {
					this.$message({
						type: 'info',
						message: '请登录！'
					});
				}
			},
			//获取消息界面好友列表
			async getlist() {
				await this.$axios({
					methods: 'get',
					url: '/Customer/getAllBusiness?CustomerId=' + this.$cookies.get("userId"),

				}).then(res => {
					this.friendlist = res.data.date
				})
			},
			//切换好友消息页面窗口
			jumptoChat(uuid, name) {
				this.uuid = uuid;
				this.name = name;
				this.innerDrawer = true
				var that = this
				this.friendlist.forEach(function(friend) {

					if (friend.uuid == uuid) {
						that.$cookies.set("senderimg", friend.faceUrl, "1h")
					}
				})

				if (this.$cookies.get(uuid) != null) {

					this.pastrecord = (JSON.parse(this.$cookies.get(uuid)))
				};

			},
			//界面跳转
			jumptoNovel() {
				uni.navigateTo({
					url: 'UserDetail?id1=Book&id2=Novel'
				});
			},
			//界面跳转
			jumptoSofa() {
				uni.navigateTo({
					url: 'UserDetail?id1=Furnitrue&id2=Sofa'
				});
			},
			//界面跳转
			jumptoDesk() {
				uni.navigateTo({
					url: 'UserDetail?id1=Furnitrue&id2=Desk'
				});
			},
			//界面跳转
			jumptoLogIn() {
				uni.redirectTo({
					url: 'UserLoginIndex'
				})
			},


			async getNumOfOrder() {
				await this.$axios({
					methods: 'get',
					url: '/Customer/NumOfOrder?CustomerId=' + this.$cookies.get("userId"),
				}).then(res => {
					this.shoppingCartNum = res.data.date.slice(0, 1)
					this.daifahuoNum = res.data.date.slice(2, 3)
					this.daishouhuoNum = res.data.date.slice(4, 5)
					this.zulinzhong = res.data.date.slice(6, 7)
					this.daiguihuan = res.data.date.slice(8, 9)
					this.guihuanzhong = res.data.date.slice(10, 11)
				}).catch(err => {})
			},
			// 获取所有商品
			async getAllGoods() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/SKU/GetSales',
				}).then(res => {
					that.sku = res.data.date
				}).catch(err => {
					console.log(err)
				})

				this.sku.forEach((item, index) => {
					let current = {
						name: item.name,
						src: item.skuImages[0].url,
						price: item.skuSpecificationOptions[0].price,
						id: item.id,
					}
					this.allGoods.push(current);
				})
			},
			//获取推荐商品

			async getRecommendGoods() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Customer/Recommend?CustomerId=' + this.$cookies.get("userId"),
				}).then(res => {
					that.sku2 = res.data.date
				}).catch(err => {
					console.log(err)

				})

				this.sku2.forEach((item, index) => {
					let current = {
						name: item.name,
						src: item.skuImages[0].url,
						price: item.skuSpecificationOptions[0].price,
						id: item.id,
					}
					this.recommendGoods.push(current);
				})
			},
			//跳转界面

			jumpToDetail: function(id) {
				uni.navigateTo({
					url: 'GoodsDetail?id=' + id
				})
			},

		},

	}
</script>

<style>
	.outer {
		background: #2e2f3d;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10rpx;
	}

	.uni-column {

		width: 80%;


		display: flex;
		background: #fafafa;
		flex-direction: column;
	}

	.Drawerheader {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		border-bottom: 1rpx gray solid;
		height: 50rpx;
		margin-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.content {

		width: 100%;
		height: 50%;

		display: flex;



	}

	.foot {

		width: 100%;
		height: 100rpx;



	}

	.text {
		margin-left: 30rpx;
		font-size: 35rpx;
	}

	.perRow {
		width: 100%;
		display: flex;
		flex-direction: row;

		align-items: center;
		height: 120rpx;
		border-bottom: 1rpx solid gray;
	}

	.drawermain {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		margin: 10rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.tac {
		width: 30%;
		margin: 0 0 0 0;
		margin-left: 30rpx;

	}

	.main {
		background-color: #F5F5F5;
		width: 100%;
		/* flex-direction: column;
		justify-content: center;
		align-items: center;
		float: left; */
		height: 1000px;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.body {
		background-color: #F5F5F5;
		justify-content: center;
	}

	/* 搜索框 */
	.search {
		margin: auto;
		display: flex;
		width: 53%;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}

	.searchEmtpy {
		width: 2%;
	}


	.center {
		/* height: 400px; */
		display: flex;
		flex-direction: row;
	}

	.side {
		margin-left: 5%;
		width: 20%;
		background-color: #FFFFFF;
		margin-right: 1%;
	}

	.digitalSubMenu {
		position: absolute;
		transform: translate(460rpx, 0rpx);
		background-color: #FFFFFF;
		display: none;
	}

	.digitalMenu:hover>.digitalSubMenu {
		display: block;
		z-index: 1000;
	}

	.bookSubMenu {
		position: absolute;
		transform: translate(460rpx, 0rpx);
		background-color: #FFFFFF;
		display: none;

	}

	.bookMenu:hover>.bookSubMenu {
		display: block;
		z-index: 1000;

	}

	.furnitrueSubMenu {
		position: absolute;
		transform: translate(460rpx, 0rpx);
		background-color: #FFFFFF;
		display: none;

	}

	.furnitrueMenu:hover>.furnitrueSubMenu {
		display: block;
		z-index: 1000;

	}

	.swiper {
		height: 400px;
		width: 60%;
	}

	.swiperimg {
		width: 100%;
		height: 100%;
	}

	.unCard {
		background-color: #FFFFFF;
		width: 20%;
		margin-right: 5%;
		height: 400px;
		text-align: center;
		margin-left: 1%;
	}

	.card {
		background-color: #FFFFFF;
		width: 20%;
		margin-right: 5%;
		height: 400px;
		text-align: center;
		font-size: 18px;
		margin-left: 1%;
	}

	.card .card-header {
		height: 30%;
	}

	.card-body {}

	.card .card-body .Username {
		font-size: 20px;
		font-weight: bold;
		color: #409EFF;
	}

	.card .social-links {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 45px;
	}

	.cardEmpty {
		width: 16%;
	}

	.profileText {
		font-size: 18px;
		color: black;
	}

	.recommend {
		margin-top: 40rpx;
		margin-left: 5%;
		margin-right: 5%;
	}

	.recommendGoods {
		margin-top: 40rpx;
	}

	.recCardView {
		display: flex;
		margin-top: 30rpx;
	}

	.recCard {
		width: 20%;
		border-radius: 0;
		border-color: #FFFFFF;
		height: 600rpx;
		text-align: center;
	}

	.recCard-image {
		width: 100%;
		height: 400rpx;
	}

	.recCardEmpty {
		width: 1%;
	}
</style>
